<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>成绩管理</el-breadcrumb-item>
            <el-breadcrumb-item>成绩列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row type="flex" justify="center" align="center">
                <el-col :span="4"> 方式一： </el-col>
                <el-col :span="10">
                    <el-upload
                        class="upload-demo"
                        drag
                        action="https://jsonplaceholder.typicode.com/posts/"
                        multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传excel文件，且大小不能超过10MB</div>
                    </el-upload>
                </el-col>
                <el-col :span="4"> 方式二： </el-col>
                <el-col :span="6" style="margin-top: 100px">
                    <el-button type="primary" @click="OutImportdialogVisible=true">通过外部链接导入<i class="el-icon-upload el-icon--right"></i></el-button>
                </el-col>
            </el-row>
        </el-card>
        <el-dialog
                title="请输入外部链接url"
                :visible.sync="OutImportdialogVisible"
                width="30%"
                :before-close="resetForm">
            <el-form ref="form" :model="OutImportForm" label-width="80px">
                <el-form-item label="链接地址">
                    <el-input v-model="OutImportForm.url"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="OutImportdialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="OutImportdialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                OutImportdialogVisible: false,
                OutImportForm: {
                    uri:''
                },
            }
        },
        created() {

        },
        methods: {
            resetForm(){
                this.OutImportdialogVisible = false;
                this.OutImportForm = {};
            }
        }
    }
</script>
<style lang="less" scope>
</style>